<template>
	<view>
		<view class="top-bg">
			<view class="return" @click="goToBack()">
				<u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
			</view>		
			修改密码	
		</view>
		<!-- 密码三个 -->
		<view class="posBox">
			<view class="password" >
				<view class="contentuser">
					<view class="user">原密码</view>
					<view class="contentuserText">
						<u--input v-model="passwordY" :password='eyeVisibleY' placeholder="密码" border="none" > </u--input>
						<image v-if="showPassY" @click="seeTap(1)" slot="right" src="@/static/icon/zy.png" style="width:43rpx; height: 33rpx;margin-right: 30rpx;"></image>
						<image v-else @click="seeTap(1)" slot="right" src="@/static/icon/biyan.png" style="width:43rpx; height: 33rpx;margin-right: 30rpx;"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
			<view class="password" >
				<view class="contentuser">
					<view class="user">新密码</view>
					<view class="contentuserText">
						<u--input v-model="passwordX" :password='eyeVisibleX' placeholder="密码" border="none" > </u--input>
						<image v-if="showPassX" @click="seeTap(2)" slot="right" src="@/static/icon/zy.png" style="width:43rpx; height: 33rpx;margin-right: 30rpx;"></image>
						<image v-else @click="seeTap(2)" slot="right" src="@/static/icon/biyan.png" style="width:43rpx; height: 33rpx;margin-right: 30rpx;"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
			<view class="password" >
				<view class="contentuser">
					<view class="user">确认密码</view>
					<view class="contentuserText">
						<u--input v-model="passwordQr" :password='eyeVisibleQr' placeholder="密码" border="none" > </u--input>
						<image v-if="showPassQr" @click="seeTap(3)" slot="right" src="@/static/icon/zy.png" style="width:43rpx; height: 33rpx;margin-right: 30rpx;"></image>
						<image v-else @click="seeTap(3)" slot="right" src="@/static/icon/biyan.png" style="width:43rpx; height: 33rpx;margin-right: 30rpx;"></image>
					</view>
				</view>
				<view class="border"></view>
			</view>
		</view>
	
		<view style="width: 100%; height: 96rpx; position:absolute; bottom: 265rpx;">
		  <view style="padding: 0 88rpx; text-align: center;">
		    <u-button text="完成" customStyle="height: 96rpx; border-radius:10rpx; color:#fff; font-size: 36rpx;background: #3C8AFF;font-weight: bold;" @click="signPut"></u-button>
		  </view>
		</view>
		<!-- <view class="signPut" @click="signPut">
			更改密码
		</view> -->
	</view>
</template>
<script>
	import { reset_token } from "@/auth/token";
	import {putChangePassword}from "@/api/system.js"
	export default {
		data() {
			return {
				passwordY:'',
				passwordX:'',
				passwordQr:'',
				eyeVisibleY:true, // 控制眼睛图标显示状态的数组
				eyeVisibleX:true,
				eyeVisibleQr:true,
				showPassY:false,
				showPassX:false,
				showPassQr:false,
			};
		},
		mounted() {
		
		},
		onShow() {
			this.passwordY = uni.getStorageSync('HBpassword');
		},
		computed: {},
		methods: {
			seeTap(i){
				if(i==1){
					this.eyeVisibleY=!this.eyeVisibleY
					  this.showPassY=!this.showPassY
				}else if(i==2){
					this.eyeVisibleX=!this.eyeVisibleX
					  this.showPassX=!this.showPassX
				}else{
					this.eyeVisibleQr=!this.eyeVisibleQr
					  this.showPassQr=!this.showPassQr
				}
			},
			goToBack(){
			  wx.navigateBack({
			      delta: 1
			    });
			},
		async signPut() {
				// 检查新密码和确认新密码是否匹配
			 if (this.passwordX !== this.passwordQr) {
					uni.showToast({
						title: "新密码和确认新密码不匹配",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				else if(this.passwordY==this.passwordX){
					uni.showToast({
						title: '原密码和新密码相同无需修改',
						icon: 'none',
						duration: 2000
					});
					return
				}
				else if(this.passwordX == this.passwordQr){
					try{
						// 修改密码接口
					const HBusername = uni.getStorageSync('HBusername');
					 const passwordRes=await putChangePassword({
						   username: HBusername,
						   oldpassword: this.passwordY,
						   password: this.passwordX,
						   confirmpassword: this.passwordQr
						});
						if(passwordRes.data.code==200){
							uni.showToast({
								title: passwordRes.data.message,
								icon: "success",
								duration: 2000,
							});
							reset_token()
							uni.reLaunch({
							  url: '/pages/login/login'
							});
						}
						else{
							uni.showToast({
								title: passwordRes.data.message,
								icon: "none",
								duration: 2000,
							});
						}
					}
					catch(err){
						console.log(err);
					}
				}
			
			},
		}
 
	}
</script>
 
<style lang="scss" scoped>
	.top-bg{
		width: 100%;
		height: 330rpx;
		background: #2769F7;
		border-radius: 0rpx 0rpx 140rpx 140rpx;
		padding-top: 104rpx;
		text-align: center;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		letter-spacing: 4rpx;
		position: relative;
		.return{
			position: absolute;
			left: 32rpx;
			margin-top: 8rpx;
		}
	}
	.input{
		// background-color: red;
		height: 80rpx;
	}
	.user {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		padding-left: 10rpx;
	}
 
	.contentuser {
		display: flex;
		// padding-right: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
	}
 
	.contentuserText {
		display: flex;
		width: 400rpx;
		// background-color: aqua;
		font-size: 28rpx;
		align-items: center;
		padding-right: 15rpx;
		font-weight: 400;
		color: #666666;
	}
 
	.border {
		width:100%;
		height: 1rpx;
		opacity: 1;
		border-bottom: 0.5rpx solid #D2D2D2;
 
	}
 .password {
 		box-sizing: border-box;
 	}
	.posBox {
		width: 632rpx;
		height: 354rpx;
		position: absolute;
		top:200rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 0 32rpx;
		padding:0 28rpx;
	}
 
	.signPut {
		width: 90%;
		font-size: 32rpx;
		height: 80rpx;
		color: #FFFFFF;
		border-radius: 68rpx;
		margin-top: 82rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #F65A02;
		margin-left: auto;
		margin-right: auto;
	}
</style>